<template>
  <!--地貌设定新增弹层 -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleSmall"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      label-width="auto"
    >
      <el-radio-group v-model="formData.regionTypeId">
        <el-radio v-for="(type,index) in typeList" :key="index" style="margin-top:10px" :label="type.id">{{ type.typeName }}</el-radio>
      </el-radio-group>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
</template>

<script>
import { getRegionalTypeListNo, configRegionalType, detailRegionalType } from '@/api/superviseBaseInfo/regionalSettings'
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
export default {
  components: {
    DialogFooter
  },
  data() {
    return {
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: {
        regionTypeId: '' // 地貌类型
      },
      typeList: [],
      multip: [] // 多选的数据
      /* 新增 end*/
    }
  },
  methods: {
    /* 新增/编辑弹层 start*/
    handleAdd(title, row) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.multip = row
      this.emptyAddForm()
      this.getList()
      if (row.length === 1) this.getDetailById(row[0].regionTypeId) // 当选中一条时才回显详情
    },
    // 获取地貌列表
    async getList() {
      const { data: { rows }} = await getRegionalTypeListNo()
      this.typeList = rows.map(item => ({
        typeName: item.typeName,
        id: item.id
      }))
    },
    // 获取详情
    async getDetailById(typeId) {
      const { data } = await detailRegionalType(typeId)
      if (data) {
        this.formData = { ...this.formData, regionTypeId: data.id }
      }
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) { // 更新
          this.btnDisabled = true
          const sysRegions = this.multip.map(item => ({ regionTypeId: this.formData.regionTypeId, regionCode: item.value }))
          await configRegionalType({ sysRegions })
          this.msgSuccess('保存成功')
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.regionTypeId = ''
    }
    /* 新增弹层 end*/
  }

}
</script>

<style scoped>
.tree-city {
  margin-top: 8px;
}
</style>
